<template>
    <div class="map-container">
        <!-- 地图容器 -->
        <div ref="mapContainer" class="map"></div>

        <!-- 控制按钮 -->
        <div class="controls">
            <button @click="zoomIn">放大</button>
            <button @click="zoomOut">缩小</button>
        </div>
    </div>
</template>

<script>
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'

export default {
    name: 'LeafletMap',
    mounted() {
        // 初始化地图
        this.initMap()
    },
    methods: {
        initMap() {
            // 获取地图容器
            const mapContainer = this.$refs.mapContainer

            // 创建地图实例
            this.map = L.map(mapContainer).setView([31.2304, 121.4737], 12) // 上海市中心坐标

            // 添加底图层
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            }).addTo(this.map)

            // 添加标记点示例（可扩展为真实数据）
            L.marker([31.2304, 121.4737])
                .addTo(this.map)
                .bindPopup('上海市中心')
                .openPopup()
        },
        zoomIn() {
            if (this.map) {
                this.map.zoomIn()
            }
        },
        zoomOut() {
            if (this.map) {
                this.map.zoomOut()
            }
        }
    },
    beforeUnmount() {
        // 销毁地图实例以避免内存泄漏
        if (this.map) {
            this.map.remove()
        }
    }
}
</script>

<style scoped>
.map-container {
    width: 100%;
    height: calc(100vh - 100px);
    position: relative;
}

.map {
    width: 100%;
    height: 100%;
}

.controls {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000;
}

.controls button {
    margin: 5px;
    padding: 8px 16px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.controls button:hover {
    background-color: #45a049;
}
</style>